
import { useReactive, useDOM } from '../reactivity';

function App() {
  const state = useReactive({
    count: 0,
    name: 'charlie'
  });

  const add = (num) => {
    state.count += num;
  }

  const minus = (num) => {
    state.count -= num;
  }

  const changeName = (name) => {
    state.name = name;
  }

  const template = `
    <h1>{{ count }}</h1>
    <h2>{{ name }}</h2>
    <button onClick="add(2)"> + </button>
    <button onClick="minus(1)"> - </button>
    <button onClick="changeName('修改后的名字')"> 修改名字 </button>
  `;

  const methods = {
    add,
    minus,
    changeName
  }

  return {
    state,
    template,
    methods
  }
}

useDOM(
  App(),
  document.querySelector('#app')
);
